<template>
	<view>
		<view v-if="show" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">
			<view class="cu-form-group">
				<view class="text-gray title">分组名</view>
				<input placeholder="请输入文件名称" v-model="form.name" name="input"></input>
			</view>
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirm">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mx-2 margin-top-xl margin-bottom-xl shadow-lg">
			<view v-if="list.length===0">暂无分组</view>
			<view class="flex " v-else v-for="(item,index) in list" :key="index">
				<view class="flex mb-1  py-1 mx-1 flex-direction align-start" style="width: 60%;">
					<view class="">
						id：{{item.id}}
					</view>
					<view class="" >
						分组名：{{item.name}}
					</view>
					
				</view>
				<view class="flex align-center">
					<view @click="deleted(item)" class="flex cu-tag round bg-orange">
						删除
					</view>
					<view @click="editModel(item)" class="flex cu-tag round bg-olive">
						修改
					</view>
				</view>
			</view>

		</view>
		<view class="padding-xl">
			<button class="mt-2 block bg-green  lg  cu-btn round" @click="openModel('add')">新增分组</button>
		</view>
		<view class="flex flex-direction bg-white mx-2 margin-top-xl margin-bottom-xl shadow-lg">
			<view v-if="users.length===0">暂无用户</view>
			<view class="flex " v-else v-for="(item,index) in users" :key="index">
				<view class="flex mb-1  py-1 mx-1 flex-direction align-start">
					<view class="">
						openId:
					</view>
					<view class="" >
						{{item[0]}}
					</view>
				</view>
				<view class="flex align-center">
					<view @click="remove(item)" class="flex cu-tag round bg-orange">
						移动
					</view>
					<view @click="reName(item)" class="flex cu-tag round bg-olive">
						备注
					</view>
				</view>
			</view>
		
		</view>
		<view v-if="showgroup" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">
			<view class="cu-form-group">
				<view class="title text-grey">选择分组</view>
				<picker @change="PickerChange" :value="index" :range="pickers">
					<view class="picker">
						<view class="cu-tag round bg-olive ">
							{{pickers[index]}}
						</view>
					</view>
				</picker>
			</view>
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirmRemove">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>
		<view v-if="showname" class="cu-list menu-avatar card-menu margin-top-xl margin-bottom-xl padding-bottom-xl shadow-lg radius">
			<view class="cu-form-group">
				<view class="text-gray title">备注</view>
				<input placeholder="请输入备注名" v-model="remark" name="input"></input>
			</view>
			<view class="mt-5 flex align-center px-3">
				<view style="flex:3;">
					<button class='cu-btn  round bg-gradual-blue padding  text-center shadow-blur py-4 font-lg block' @click="confirmRemark">提交</button>
				</view>
				<view class="ml-1" style="flex:2;">
					<button class='cu-btn  round bg-orange padding  text-center shadow-blur py-4 font-lg block' @click="hideModel">取消</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				users:[],
				show: false,
				form: {
					name:'',
					id:''
				},
				options:'',
				index:0,
				openid:'',
				showgroup:false,
				showname:false,
				remark:''
			}
		},
		computed:{
			pickers(){
				if(this.list.length>0){
					let list=[]
					this.list.forEach(v=>{
						list.push(v.name)
					})
					return list
				}
				return []
			}
		},
		onLoad() {
			// 获取分组列表
			this.getList()
			this.getUserList()

		},
		methods: {
			reName(item){
				this.openid=item[0]
				this.showname=true
			},
			editModel(item){
				this.options='edit'
				this.form=item
				this.show=true
			},
			deleted(item){
				this.options='del'
				this.form=item
				uni.showModal({
					title: '删除操作',
					content: '是否删除该分组',
					showCancel: true,
					success: res => {
						this.confirm()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideModel(){
				this.options=''
				this.form={
					name:'',
					id:''
				}
				this.showgroup=false
				this.show=false
				this.showname=false
			},
			getUserList() {
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'user',
						options: 'list'
					}
				}).then(res => {
					this.users=res.result.data.data
				})
				
			},
			getList() {
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'group',
						options: 'list'
					}
				}).then(res => {
					this.list=res.result.data.groups
				})
				
			},
			confirm() {
				let form=this.form
				// 获取token
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'group',
						options:this.options,
						params:form
					}
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						});
						this.getList()
					}
				})
				this.show = false
			},
			remove(item){
				this.openid=item[0]
				this.showgroup=true
			},
			confirmRemove(){
				let form={
					openid:this.openid,
					to_groupid:this.list[this.index].id
				}
				// 获取token
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'group',
						options:'remove',
						params:form
					}
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						});
					}
				})
				this.showgroup = false
			},
			confirmRemark(){
				if(!this.remark){
					return uni.showToast({
						title: '备注名不能为空',
						icon: 'none'
					});
				}
				let form={
					openid:this.openid,
					remark:this.remark
				}
				// 获取token
				uniCloud.callFunction({
					name: 'wxAction',
					data: {
						action: 'user',
						options:'remark',
						params:form
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						});
					}
				})
				this.showname = false
			},
			PickerChange(e){
				this.index=parseInt(e.detail.value)
			},
			openModel(type) {
				this.options='add'
				this.form={
					id:'',
					name:''
				}
				this.show = true

			}
		}
	}
</script>

<style>

</style>
